<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link rel="stylesheet" href="../code/shopping.css">
</head>
<body>
    <div class="gwc" style=" margin:auto;">
        <table cellpadding="0" cellspacing="0" class="gwc_tb1">
            <tr>
                <td class="tb1_td1"><input type="checkbox"  id="allselect" /></td>
                <td class="tb1_td1">全选</td>
                <td class="tb1_td3">商品</td>
                <td class="tb1_td4">商品信息</td>
                <td class="tb1_td5">数量</td>
                <td class="tb1_td6">单价</td>
                <td class="tb1_td7">操作</td>
            </tr>
        </table>
        
        <table cellpadding="0" cellspacing="0" class="gwc_tb2">
            <tr>
                <td class="tb2_td1">
                    <input class="goodsInput" type="checkbox" value="1" name="newslist" id="newslist-1" />
                </td>
                <td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
                <td class="tb2_td3"><a href="#">产品标题</a></td>
                <td class="tb1_td4">一件</td>
                <td class="tb1_td5">
                    <input class="min" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                    <input class="goods_num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                    <input class="add" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
                </td>
                <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
                <td class="tb1_td7"><a href="javascript:void(0);" class="del">删除</a></td>
            </tr>
            <tr>
                <td class="tb2_td1">
                    <input type="checkbox" class="goodsInput"  value="1" name="newslist" id="newslist-2" />
                </td>
                <td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td>
                <td class="tb2_td3"><a href="#">产品标题</a></td>
                <td class="tb1_td4">一件</td>
                <td class="tb1_td5">
                    <input class="min" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                    <input class="goods_num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                    <input class="add" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
                </td>
                <td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
                <td class="tb1_td7"><a href="javascript:void(0);" class="del">删除</a></td>
            </tr>
        </table>
        
        <table cellpadding="0" cellspacing="0" class="gwc_tb3">
            <tr>
                <td class="tb1_td1 web0225">
                    <input type="button" value="添加商品" id='addGoods'/>
                    <input type="button" value="复选框反选" id='fanselect' />
                </td>
                <td class="tb1_td1">&nbsp;</td>
                <td class="tb3_td1">&nbsp;</td>
                <td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
                <td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></span></td>
                <td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;"  class="jz2" id="jz2">结算</a></td>
            </tr>
        </table>
    
    </div>
   <script src="../code/jq.js"></script> 
   <script>
    // 1.全选、全不选
    // 获取全选按钮
    $('#allselect').click(function(){
        // 当前状态选中输入框状态相同
     let status = $(this).prop('checked')
     $('.goodsInput').prop('checked',status);
     fn1()
    })
    // 2.反选框
     $('#fanselcet').click(function(){
    //  循环 输入框勾选状态
        $('.goodsInput').each((i,item)=>{
            let statuss = $(item).prop('checked')
            $(item).prop('checked',!statuss);
        })
        fn1()
       
     })
    //  3.添加商品
    $('#addGoods').click(function(){
        // 添加标签
        $('table:eq(1) tbody').append(` <tr>
                <td class="tb2_td1">
                    <input class="goodsInput" type="checkbox" value="1" name="newslist" id="newslist-1" />
                </td>
                <td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
                <td class="tb2_td3"><a href="#">产品标题</a></td>
                <td class="tb1_td4">一件</td>
                <td class="tb1_td5">
                    <input class="min" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                    <input class="goods_num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                    <input class="add" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
                </td>
                <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
                <td class="tb1_td7"><a href="javascript:void(0);" class="del">删除</a></td>
            </tr>`)

    })
    // 4.删除商品 事件委托
    $('table:eq(1) tbody').on('click','.del',function(){
        // 选中 删除父级标签
        $(this).parents('tr').remove()
        fn1()
    })
    // 5.商品数量+1  事件委托
    $('.add').click(function(){
      let num = $(this).prev().val()
      num++
      $(this).prev().val(num)
      fn1()
     
    })
    // 6.商品数量-1 
    $('.min').click(function(){
      let nums = $(this).next().val()
      nums--
      if(nums<1){
        nums=1
      }
      $(this).next().val(nums)
      fn1()
     
    })
    // 7.全选（统计）
    function fn1(){
     let totalprice = 0;
     let totalnum = 0;
    // 遍历 获取  单价 数量
        $('.goodsInput:checked').each((i,item)=>{
           
         let math =  $(item).parents('tr').find('.goods_num').val()
         let price = $(item).parents('tr').find('.tot').text()
         totalnum += parseInt(math);
         totalprice += parseFloat(price)*totalnum;
        })
        // 添加到相应区域
     $('#shuliang').text(totalnum)
     $('#zong1').text(totalprice)
    }
    // 单选框按钮 选中并计算
    $('table:eq(1) tbody').on('click', '.goodsInput', function() {
      fn1()
    
     let status = $('.goodsInput').length ===  $('.goodsInput:checked').length 
     $('#allselect').prop('checked', status)
    })

    // 8.书写输入框里数量
    $('table:eq(1) tbody').on('input', '.goods_num', function() {
        let numm = $(this).val()
        // 替换所有非数字字符
        numm = String(numm).replace(/\D/g,'')
        if(numm<1){
            numm=1
        }
        $(this).val(numm)
      fn1()
    
  
    })



 




 
  
   </script>
</body>
</html>